<template>
  <el-main>
    <div class="invoice-container">
      <div class="searchForm">
        <el-date-picker
          v-model="chosenMonth"
          type="month"
          placeholder="选择月"
          value-format="yyyy-MM"
        >
        </el-date-picker>
        <el-button type="primary" @click="selectByMonth">查询</el-button>
        <span style="margin-left: 30px">总额：{{ totalAmount }}</span>
      </div>

      <div class="operateBtn-container">
        <el-button type="success" size="small" @click="pdfs2Pdf"
          >合并</el-button
        >
        <el-button type="danger" size="small" @click="deleteInvoice"
          >删除</el-button
        >
        <el-button type="primary" size="small" @click="toExcel"
          >导出Excel</el-button
        >
        <el-button type="primary" size="small" @click="toZip"
          >导出压缩包</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="uploadDialogVisible = true"
          style="float: right"
          >上传发票</el-button
        >
      </div>
      <el-table :data="invoices" @selection-change="handleSelectionChange" v-loading="loading">
        <!-- @cell-click="handleClick" -->
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="开票日期" prop="invoiceDate"></el-table-column>
        <el-table-column
          label="上传发票月份"
          prop="uploadTime"
        ></el-table-column>
        <el-table-column label="发票代码" prop="invoiceCode"></el-table-column>
        <el-table-column label="发票号码" prop="invoiceNum"></el-table-column>
        <el-table-column label="校验码后六位" prop="validate"></el-table-column>
        <el-table-column label="总金额" prop="totalAmount"></el-table-column>
        <el-table-column
          label="发票提供商"
          prop="invoiceName"
        ></el-table-column>
        <el-table-column label="操作" prop="path">
          <template slot-scope="scope">
            <el-button @click="toDetailPage(scope.row.path)">
              <!-- <el-link type="info" :href="scope.row.path" target="_blank" 
                >详情</el-link
              > -->详情
            </el-button>
            <el-button @click="editTable(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <edit-dialog
      :dialogVisible="editDialogVisible"
      :currentRowInfo="currentRowInfo"
      @toClose="closeEditDialog(arguments)"
    ></edit-dialog>
    <upload
      :dialogVisible="uploadDialogVisible"
      @toClose="closeUploadDialog(arguments)"
    ></upload>
  </el-main>
</template>

<script>
import { exportFile } from "@/api/commonFunc.js";
import {
  updateInvoice,
  getUserDetail,
  logoutCommon,
  getZipCommon,
} from "@/service.js";
import upload from "./upload.vue";
import EditDialog from "./editDialog.vue";
export default {
  components: { upload, EditDialog },
  name: "InfoTable",
  data() {
    return {
      loading: true,
      editDialogVisible: false,
      uploadDialogVisible: false,
      currentRowInfo: {},
      user: {},
      invoices: [],
      datas: [],
      pdfs: "",
      chosenMonth: "",
      totalAmount: 0,
    };
  },
  methods: {
    async toZip() {
      if (this.datas.length == 0) {
        this.$message.warning("请选择发票后再操作");
      } else {
        const res = await getZipCommon(this.datas);
        if (res.data.code == 0) {
          exportFile(res.data.data, `${this.chosenMonth}发票.zip`);
        }
      }
    },
    toDetailPage(path) {
      window.open(path, "_blank");
    },
    // 关闭上传对话框
    closeUploadDialog(arg) {
      if (arg[0]) {
        this.loading = true;
        setTimeout(() => {
          this.selectByMonth();
        }, 800);
      }
      this.uploadDialogVisible = false;
    },
    closeEditDialog(arg) {
      if (arg[0]) {
        this.loading = true;
        setTimeout(() => {
          this.selectByMonth();
        }, 800);
      }
      this.editDialogVisible = false;
    },
    // 调用接口更新当前id发票数据
    // async handleUpdate() {
    //   const params = this.currentRowInfo;
    //   const res = await updateInvoice(params);
    //   console.log("res", res);
    //   if (res.data.code === 0) {
    //     this.selectByMonth();
    //   }
    //   this.editDialogVisible = false;
    // },
    // handleClick(e) {
    //   this.currentRowInfo = {
    //     invoiceId: e.invoiceId,
    //     invoiceCode: e.invoiceCode,
    //     invoiceNum: e.invoiceNum,
    //     totalAmount: e.totalAmount,
    //     validate: e.validate,
    //   };
    //   console.log("------", this.currentRowInfo);
    // },
    editTable(data) {
      this.currentRowInfo = data;
      this.editDialogVisible = true;
    },
    sum() {
      this.$axios({
        method: "get",
        url: "/invoice/sum/month/" + this.chosenMonth,
        headers: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.totalAmount = res.data.data.totalAmount;
          console.log(this.totalAmount);
        }
      });
    },
    selectByMonth() {
      this.$axios({
        method: "get",
        url: "/invoice/select/month/" + this.chosenMonth,
        headers: {
          token: sessionStorage.getItem("token"),
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.invoices = res.data.data;
          this.loading = false;
          this.sum();
        }
      });
    },
    toExcel() {
      if (this.datas.length == 0) {
        this.$message.warning("请选择发票后再操作");
      } else {
        this.$axios({
          method: "post",
          url: "/file/excel",
          headers: {
            token: sessionStorage.getItem("token"),
          },
          data: this.datas,
        }).then((res) => {
          if (res.data.code == 0) {
            exportFile(res.data.data.excel, `${this.chosenMonth}发票.xlsx`);
          }
        });
      }
    },
    pdfs2Pdf() {
      if (this.datas.length == 0) {
        this.$message.warning("请选择发票后再操作");
      } else {
        this.$axios({
          method: "post",
          url: "/file/pdfs2Pdf",
          headers: {
            token: sessionStorage.getItem("token"),
          },
          data: this.datas,
        }).then((res) => {
          if (res.data.code == 0) {
            const a = document.createElement("a");
            a.href = res.data.data.pdfs;
            a.target = "_blank";
            a.style.display = "none";
            document.body.append(a);
            a.click();
            URL.revokeObjectURL(a.href);
            document.body.removeChild(a);
          }
        });
      }
    },
    deleteInvoice() {
      if (this.datas.length == 0) {
        this.$message.warning("请选择发票后再操作");
      } else {
        this.$axios({
          method: "delete",
          url: "/invoice/delete",
          headers: {
            token: sessionStorage.getItem("token"),
          },
          data: this.datas,
        }).then((res) => {
          if (res.data.code == 0) {
            this.$message.success(res.data.message);
            this.loading = true;
            this.selectByMonth();
          }else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    handleSelectionChange(datas) {
      this.datas = datas;
    },
    async getUser() {
      const res = await getUserDetail();
      if (res.data.code == 0) {
        this.user = res.data.data;
      }
    },
  },
  created() {
    let date = new Date();
    this.chosenMonth = `${date.getFullYear()}-${date.getMonth() + 1}`
  },
  mounted() {
    this.selectByMonth();
    this.getUser();
  },
};
</script>

<style lang="scss" scoped>
.invoice-container {
  height: 80vh;
  .searchForm {
    margin-bottom: 10px;
  }
  .operateBtn-container {
    margin-bottom: 10px;
  }
}
</style>
